<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新冠病毒疫情跟踪器</title>
    <link rel="stylesheet" href="{{ url_for('static', path='/semantic.min.css') }}">
    <script src="{{ url_for('static', path='/jquery-3.5.1/jquery-3.5.1.min.js') }}"></script>
    <script src="{{ url_for('static', path='/semantic.min.js') }}"></script>
    <script>
        $(document).ready(function(){
            $("#filter").click(function(){
                const city=$("#city").val();
                window.location.href="http://"+window.location.host+"/coronavirus?city="+city;
            });

            $("#sync").click(function(){
                $.get("{{ sync_data_url }}", function(result){
                    alert("Message: " + result.message)
                })

            });
        })
    </script>
</head>
<body>
<div class="ui container">
    <h2></h2>
    <h1 style="text-align:center">新冠病毒疫情跟踪器</h1>
    <h2></h2>

    <button id="filter" style="float:left" type="submit" class="ui button alert_secondary">过滤</button>
    <div class="ui input">
        <label for="city"></label>
        <input id="city" type="text" placeholder="城市">
    </div>
    <button id="sync" style="float:right" type="submit" class="ui button primary">同步数据</button>

    <table class="ui celled table">
        <thead>
        <tr>
            <th>城市</th>
            <th>日期</th>
            <th>累计确诊数</th>
            <th>累计死亡数</th>
            <th>累计痊愈数</th>
            <th>更新时间</th>
        </tr>
        </thead>

        <tbody>
        {% for d in data %}
        <tr>
            <td>{{d.city.province}}</td>
            <td>{{d.date}}</td>
            <td>{{d.confirmed}}</td>
            <td>{{d.deaths}}</td>
            <td>{{d.recovered}}</td>
            <td>{{d.updated_at}}</td>
        </tr>
        {% endfor %}
        </tbody>
    </table>
</div>
</body>
</html>